<template>
  <div class="stu-word-save" v-loading="loading">
    <info-top :showExpend="false"></info-top>
    <div style="width: 1200px;margin: 20px auto;">
      <top-tip :examTitle="examTitle" :batchTitle="batchTitle"></top-tip>
      <div class="stu-word-content">
        <div
          id="quesData_content"
          style="background: #fff;padding: 20px;width:880px;position: relative;overflow: hidden;"
          v-if="batchShoow"
        >
          <table
            style="border-collapse:collapse;border-spacing:0px;width:100%;"
            border="0"
            cellpadding="0"
            cellspacing="0"
          >
            <tr>
              <!-- 分割线 -->
              <td style="border-style:none;width: 88px;" valign="top" v-if="lineShow">
                <div
                  id="quesData_line"
                  style="position: relative;z-index:100;left: 0;top: 0;width: 80px;height: 842px;margin-right: 8px;"
                >
                  <span
                    style="position: absolute;top: 30%;right: 13px;color: #000;font-size: 14px;background-color: #fff;z-index: 1;"
                  >分</span>
                  <span
                    style="position: absolute;top: 50%;right: 13px;color: #000;font-size: 14px;background-color: #fff;z-index: 1;"
                  >割</span>
                  <span
                    style="position: absolute;top: 70%;right: 13px;color: #000;font-size: 14px;background-color: #fff;z-index: 1;"
                  >线</span>
                  <span
                    style="position: absolute;right: 34px;top: 160px;transform: rotateZ(-90deg);transform-origin: right bottom;white-space: nowrap;font-size: 24px;color: #000000;"
                  >
                    <label style="margin-right: 30px;">
                      姓名:
                      <u>{{DisplayName}}</u>
                    </label>
                    <label style="margin-right: 30px;">
                      班级:
                      <u>{{ClassName}}</u>
                    </label>
                    <label>
                      学号:
                      <u>{{UserNo}}</u>
                    </label>
                  </span>
                  <div
                    style="position: absolute;top: 0;height: 100%;border-right: 1px dashed #000;right: 20px;"
                  ></div>
                </div>
              </td>
              <!-- 试卷内容 -->
              <td valign="top">
                <div style="text-align: center;font-size: 26px;">{{title}}</div>
                <div
                  style="text-align: center;margin-top: 20px;"
                  v-if="totalShow && totalScoreShow"
                >
                  <table
                    style="border-collapse:collapse;border-spacing:0px;width: 100%"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                  >
                    <tr>
                      <th style="width: 30px;"></th>
                      <th
                        style="font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;"
                      >题号</th>
                      <th
                        style="font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;"
                        v-for="(item,index) in list"
                        :key="index"
                      >{{backQuesNum[index]}}</th>
                      <th style="width: 100px;font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;" v-if="getTotalScore">总得分</th>
                      <th style="width: 30px;"></th>
                    </tr>
                    <tr>
                      <th style="width: 30px;"></th>
                      <th
                        style="font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;"
                      >得分</th>
                      <th
                        style="font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;"
                        v-for="(item,index) in list"
                        :key="index"
                      ></th>
                      <th style="width: 100px;font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;color: #f00;" v-if="getTotalScore">{{examScore}}分</th>
                      <th style="width: 30px;"></th>
                    </tr>
                  </table>
                </div>
                <br />
                <br />
                <div style="margin-top: 20px;">
                  <div v-for="(item,index) in list" :key="index" style="margin-bottom: 10px;">
                    <table
                      style="border-collapse:collapse;border-spacing:0px;width:100%;"
                      border="0"
                      cellpadding="0"
                      cellspacing="0"
                      v-if="totalShow"
                    >
                      <tr>
                        <th
                          v-if="scoreShow"
                          style="width:74px;border: 1px solid #000;text-align: center;"
                        >批阅人</th>
                        <th
                          v-if="scoreShow"
                          style="width:74px;border: 1px solid #000;text-align: center;"
                        ></th>
                        <td v-if="scoreShow" style="width:10px;"></td>
                        <td v-if="scoreShow"></td>
                      </tr>
                      <tr>
                        <th
                          v-if="scoreShow"
                          style="width:74px;border: 1px solid #000;text-align: center;"
                        >得分</th>
                        <th
                          v-if="scoreShow"
                          style="width:74px;border: 1px solid #000;text-align: center;"
                        ></th>
                        <td v-if="scoreShow" style="width:10px;"></td>
                        <td></td>
                      </tr>
                    </table>
                    <div style="margin-top: 10px;">
                          {{backQuesNum[index]}}、
                          <span v-if="item.type == 1">单选题</span>
                          <span v-if="item.type == 2">多选题</span>
                          <span v-if="item.type == 3">判断题</span>
                          <span v-if="item.type == 4 || item.type == 5">填空题</span>
                          <span v-if="item.type == 6">问答题</span>
                          <span v-if="item.type == 7">匹配题</span>
                          <span v-if="item.type == 8 || item.type == 12">阅读理解</span>
                          <span v-if="item.type == 9 || item.type == 13">完形填空</span>
                          <span v-if="item.type == 11">视听题</span>
                          <span
                            style="color: #5f5f5f;font-weight: initial;"
                          >（共{{item.num}}题，共{{item.Score}}分）</span>
                        </div>
                    <div style="margin-top: 10px;" v-for="(ques,key) in item.data" :key="key">
                      <div style="word-break:break-all;display: inline;" v-html="fileQuestion(ques,ques.num)"></div>
                      <span style="color: #f00;margin-left: 10px;" v-if="getScoreShow">(得分：{{ques.GetScore}}分)</span>
                      <!-- 单选 1 多选 2 -->
                      <div v-if="(ques.QuestionType == 1 || ques.QuestionType == 2) && stuAnswerIs">
                        <table>
                          <tr>
                            <td style="width:15px"></td>
                            <td>
                              <div
                                style="word-break: break-all;"
                                v-for="(Answer,num) in ques.AnswerList"
                                :key="num"
                                v-html="fileAnswer(Answer,num)"
                              ></div>
                            </td>
                            <td style="width:15px"></td>
                          </tr>
                        </table>
                      </div>
                      <!-- 判断 3 -->
                      <div v-if="ques.QuestionType == 3 && stuAnswerIs">
                        <table>
                          <tr>
                            <td style="width:15px"></td>
                            <td>A、正确</td>
                            <td style="width:15px"></td>
                          </tr>
                          <tr>
                            <td style="width:15px"></td>
                            <td>B、错误</td>
                            <td style="width:15px"></td>
                          </tr>
                        </table>
                      </div>
                      <!-- 客观填空 4 -->
                      <div v-if="ques.QuestionType == 4">
                        学生作答：
                        <table>
                          <tr v-for="(exercise,num) in exerciseNum(ques.AnswerList)" :key="num">
                            <td style="width:15px"></td>
                            <td style="width: 45px;vertical-align: top;">
                              <div style="margin-top: 5px;">填空{{num+1}}:</div>
                            </td>
                            <td>
                              <div
                                style="margin-top: 5px;width: 660px;word-break:break-all;"
                                v-if="ques.StuAnswer"
                              >{{JSON.parse(ques.StuAnswer)[num].Content}}</div>
                            </td>
                            <td style="width:15px"></td>
                          </tr>
                        </table>
                      </div>
                      <!-- 主观填空 5 -->
                      <div v-if="ques.QuestionType == 5">
                        学生作答：
                        <table>
                          <tr v-for="(exercise,num) in ques.AnswerList" :key="num">
                            <td style="width:15px"></td>
                            <td style="width: 45px;vertical-align: top;">
                              <div style="margin-top: 5px;">填空{{num+1}}:</div>
                            </td>
                            <td>
                              <div
                                style="margin-top: 5px;width: 660px;word-break:break-all;"
                                v-if="ques.StuAnswer"
                              >{{JSON.parse(ques.StuAnswer)[num].Content}}</div>
                            </td>
                            <td style="width:15px"></td>
                          </tr>
                        </table>
                      </div>
                      <!-- 问答题 6 -->
                      <div v-if="ques.QuestionType == 6">
                        <br />
                        <div style="word-break:break-all;" v-if="ques.StuAnswer">学生作答：{{ques.StuAnswer}}</div>
                        <div v-else>
                          <br />
                          学生作答：
                        </div>
                        <br />
                      </div>
                      <!-- 匹配题 7 -->
                      <div v-if="ques.QuestionType == 7">
                        <table
                          style="border-collapse:collapse;border-spacing:0px;width:100%;"
                          border="0"
                          cellpadding="0"
                          cellspacing="0"
                          v-if="stuAnswerIs"
                        >
                          <tr v-for="num in Math.ceil(ques.AnswerList.length/2)" :key="num">
                            <td style="width: 15px;" valign="top"></td>
                            <td style="width: 350px;" valign="top">
                              <span v-html="fileAnswerq(ques.AnswerList[(num-1)*2],(num-1)*2)"></span>
                            </td>
                            <td style="width: 15px;" valign="top"></td>
                            <td style="width: 15px;" valign="top"></td>
                            <td style="width: 350px;" valign="top">
                              <span
                                v-html="fileAnswerq(ques.AnswerList[(num-1)*2+1],(num-1)*2+1)"
                                v-if="(num-1)*2+1 <= ques.AnswerList.length-1"
                              ></span>
                            </td>
                            <td style="width: 15px;" valign="top"></td>
                          </tr>
                        </table>
                        <div style="height: 10px;">&nbsp;&nbsp;&nbsp;</div>
                        <table
                          style="border-collapse:collapse;border-spacing:0px;width:100%;"
                          border="0"
                          cellpadding="0"
                          cellspacing="0"
                          v-if="stuAnswerIs"
                        >
                          <tr v-for="num in Math.ceil(ques.PiAnswer.length/2)" :key="num">
                            <td style="width: 15px;" valign="top"></td>
                            <td style="width: 350px;" valign="top">
                              <span v-html="fileAnswers(ques.PiAnswer[(num-1)*2],(num-1)*2)"></span>
                            </td>
                            <td style="width: 15px;" valign="top"></td>
                            <td style="width: 15px;" valign="top"></td>
                            <td style="width: 350px;" valign="top">
                              <span
                                v-html="fileAnswers(ques.PiAnswer[(num-1)*2+1],(num-1)*2+1)"
                                v-if="(num-1)*2+1 <= ques.PiAnswer.length-1"
                              ></span>
                            </td>
                            <td style="width: 15px;" valign="top"></td>
                          </tr>
                        </table>
                        <div style="word-break:break-all;">学生作答：{{steMateAnswer(ques)}}</div>
                      </div>
                      <!-- 阅读理解 8 || 12  完形填空 9 || 13 视听题 11 -->
                      <div
                        v-if="ques.QuestionType == 8 || ques.QuestionType == 9 ||ques.QuestionType == 11 || ques.QuestionType == 12 || ques.QuestionType == 13"
                      >
                        <div
                          v-for="(child,childAnswerIndex) in ques.SubQuesList"
                          :key="childAnswerIndex"
                          style="margin-bottom: 10px;margin-left: 15px;"
                        >
                          <div
                            v-html="fileQuestionChild(child,childAnswerIndex)"
                            style="display:inline;"
                          ></div>
                          <span style="color: #f00;margin-left: 10px;">(得分：{{child.StuDo.GetScore}}分)</span>
                          <div v-if="(child.SubQuestionType == 1 || child.SubQuestionType == 2) && stuAnswerIs">
                            <div
                              style="margin-left: 15px;word-break: break-all;"
                              v-for="(childAnswer,childkey) in child.AnswerList"
                              :key="childkey"
                              v-html="fileAnswer(childAnswer,childkey)"
                            ></div>
                          </div>
                          <div v-if="child.SubQuestionType == 3 && stuAnswerIs">
                            <div style="margin-left: 15px;">A、正确</div>
                            <div style="margin-left: 15px;">B、错误</div>
                          </div>
                          <div v-if="child.SubQuestionType == 6">
                            <br />
                            <div style="word-break:break-all;" >学生作答：<span v-if="child.StuDo.Answer">{{child.StuDo.Answer}}</span></div>
                            
                            <br />
                          </div>
                          <div v-if="child.SubQuestionType == 6 && referenceShow">
                            参考答案：<span style="display: inline-block;word-break: break-all;width: calc(100% - 150px);vertical-align: top;" v-html="child.Answer"></span>
                          </div>
                          <div v-if="(child.SubQuestionType == 1 || child.SubQuestionType == 2 || child.SubQuestionType == 3) && referenceShow">
                            参考答案：{{steChildAnswer(child)}}
                          </div>
                          <div v-if="referenceShow" >
                            答案解析：
                            <span style="display: inline-block;width: calc(100% - 150px);vertical-align: top;word-break:break-all;" v-html="child.ResultAnalysis || '暂无答案解析'"></span>
                          </div>
                        </div>
                        
                      </div>
                      <!-- 参考答案 -->
                      <div
                        v-if="(ques.QuestionType == 1 || ques.QuestionType == 2 || ques.QuestionType == 3 || ques.QuestionType == 7) && referenceShow"
                      >参考答案：{{steAnswer(ques)}}</div>
                      <div v-if="ques.QuestionType == 4 && referenceShow">
                        参考答案：
                        <table>
                          <tr v-for="(answer,num) in steAnswer(ques)" :key="num">
                            <td style="width: 20px;"></td>
                            <td>
                              填空{{num+1}}：
                              <table>
                                <tr v-for="(answerdata,numdata) in answer.data" :key="numdata">
                                  <td style="width: 15px;"></td>
                                  <td>{{numdata+1}}:</td>
                                  <td style="width: 590px;word-break:break-all;">{{answerdata.Content}}</td>
                                  <td style="color: rgb(1, 119, 213);">{{answerdata.Percent}}%</td>
                                  <td style="width: 15px;"></td>
                                </tr>
                              </table>
                            </td>
                            <td style="width: 20px;"></td>
                          </tr>
                        </table>
                      </div>
                      <div v-if="ques.QuestionType == 5 && referenceShow">
                        参考答案：
                        <table>
                          <tr v-for="(answer,num) in steAnswer(ques)" :key="num">
                            <td style="width: 15px;"></td>
                            <td style="width: 45px;vertical-align: top;">
                              <div>填空{{num+1}}:</div>
                            </td>
                            <td style="word-break:break-all;">
                              {{answer.Content}}
                            </td>
                            <td style="width: 15px;"></td>
                          </tr>
                        </table>
                      </div>
                      <div v-if="ques.QuestionType == 6 && referenceShow">
                        参考答案：<span style="display: inline-block;width: calc(100% - 150px);vertical-align: top;word-break:break-all;" v-html="ques.Answer"></span>
                      </div>
                      <div v-if="referenceShow" >
                        答案解析：
                        <span style="display: inline-block;width: calc(100% - 150px);vertical-align: top;word-break:break-all;" v-html="ques.ResultAnalysis || '暂无答案解析'"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="to-doc-api" :style="{top: apiTop}">
          <div class="set-word-title">设置导出</div>
          <div class="to-api-checked">
            <div class="to-checked-lis">
              <a-checkbox v-model="lineShow">分割线</a-checkbox>
            </div>
            <div class="to-checked-lis">
              <a-checkbox v-model="referenceShow">参考答案</a-checkbox>
            </div>
            <div class="to-checked-lis" style="width: 100%;">
              <a-checkbox v-model="stuAnswerIs">是否展示选项部分</a-checkbox>
            </div>
            <div class="to-checked-lis">
              <a-checkbox v-model="getScoreShow" >展示得分</a-checkbox>
            </div>
            <div class="to-checked-lis">
              <a-checkbox v-model="getTotalScore" :disabled="!totalShow">展示总分</a-checkbox>
            </div>
          </div>
          <div class="border-checked"></div>
          <div class="to-api-checked">
            <div class="to-checked-lis" style="width: 100%;">
              <a-checkbox v-model="totalShow">
                分大题
                <span>(按题型进行分类)</span>
              </a-checkbox>
            </div>
            <div class="to-checked-lis">
              <a-checkbox v-model="totalScoreShow" :disabled="!totalShow">总评分</a-checkbox>
            </div>
            <div class="to-checked-lis">
              <a-checkbox v-model="scoreShow" :disabled="!totalShow">大题评分</a-checkbox>
            </div>
          </div>
          <div class="stu-list-box">
            <div class="stu-list-title">学生列表</div>
            <div class="stu-list">
              <div class="stu-lis" :class="{ 'stu-lis-activate': item.UserId == stuid }" v-for="(item,index) in stuList" :key="index" @click="getStuId(item.UserId)">
                <img :src="item.AvatorUrl" alt="">
                <div class="stu-lis-content">
                  <div class="stu-lis-name">{{item.DisplayName}}</div>
                  <div class="sty-lis-user">{{item.UserName}}</div>
                </div>
              </div>
            </div>
            <a-button type="primary" style="margin: 0 5px;display: inline-block;" @click="getFileSystemUrl">导出Word</a-button>
            <a-button type="primary" style="margin: 0 5px;display: inline-block;" @click="getBatchWord">批量导出Word</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 页面数据写死 需调整
import { exportWord } from 'mhtml-to-word';
import baidu from 'baidu-template-pro';
import html2Canvas from 'html2canvas';
import infoTop from '@/components/info-top/index.vue';
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  mixins: [GetOperationList],
  data() {
    return {
      loading: false,
      //分割线数据
      splitTitle: '姓名________ 班级________ 学号________',
      backQuesNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三'],
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      stuList: [],
      listType: [],
      title: '',
      quesList: [],
      list: [],
      file_system_url: '',
      dataURL: '',
      Progress: 0,
      DisplayName: '',
      UserNo: '',
      ClassName: '',
      SchoolName: '',
      // 分割线
      lineShow: true,
      // 参考答案
      referenceShow: false,
      // 只展示学生答案
      stuAnswerIs: true,
      // 是否分大题
      totalShow: true,
      // 大题打分
      scoreShow: true,
      // 总评分
      totalScoreShow: true,
      // 是否展示得分
      getScoreShow: false,
      // 是否展示总分
      getTotalScore: false,
      // 试卷总得分
      examScore: 0,
      batchTitle:'',
      examTitle:'',
      // 是否批量导出
      batchWord: false,
      stuNum: 0,
      batchShoow: true,
      apiTop: '156px',
      scroll: ''
    };
  },
  components: {
    infoTop,
    topTip
  },
  watch: {
    referenceShow(e) {
      setTimeout(() => {
        this.setImgCss();
      }, 500);
    },
    stuAnswerIs(e) {
     setTimeout(() => {
        this.setImgCss();
      }, 500);
    }
  },
  props: {
    batchid: {
      type: String,
      default: ''
    },
    examid: {
      type: String,
      default: ''
    },
    stuid: {
      type: String,
      default: ''
    },
    type: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.menu)
    this.getPaperStuList();
    this.previewStuPaper();
    this.getOpeartion();
  },
  methods: {
    // 监听滚动事件
    menu() {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (this.scroll > 156) {
          this.apiTop = '20px';
        } else {
          this.apiTop = '156px';
        }
    },
    getStuId(id) {
      if (this.stuid != id) {
        this.stuid = id;
        this.previewStuPaper();
      }
    },
    // 批量导出
    getBatchWord() {
      this.batchWord = true;
      this.Progress = 0;
      this.stuid = this.stuList[this.stuNum].UserId;
      this.batchShoow = false;
      this.previewStuPaper();
      
    },
    getOpeartion() {
      this.loading = true;
      this.GetOperationList('examId',this.examid).then((rst) => {
        this.loading = false;
        if (rst.code === 1) {
          this.examTitle = rst.examTitle
          this.batchTitle = rst.batchTitle
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    // 参考答案过滤
    steAnswer(data) {
      var answer = '';
      if (data.QuestionType == 1) {
        return this.Alphabet[Number(data.Answer)];
      } else if (data.QuestionType == 2 || data.QuestionType == 7) {
        let answerList = [];
        answerList = data.Answer.split(',').map(Number);
        for (let i = 0; i < answerList.length; i++) {
          if (i == 0) {
            answer = this.Alphabet[Number(answerList[i])];
          } else {
            answer = answer + ',' + this.Alphabet[Number(answerList[i])];
          }
        }
        return answer;
      } else if (data.QuestionType == 3) {
        if (Number(data.Answer) == 1) {
          answer = '正确';
        } else if (Number(data.Answer) == 0) {
          answer = '错误';
        }
        return answer;
      } else if (data.QuestionType == 4) {
        var num = -1;
        for (let i = 0; i < data.AnswerList.length; i++) {
          if (num < data.AnswerList[i].SortOrder) {
            num = data.AnswerList[i].SortOrder;
          }
        }
        var answerList = [];
        for (let key = 0; key <= num; key++) {
          var lis = {
            num: key,
            data: []
          };
          for (let i = 0; i < data.AnswerList.length; i++) {
            if (key == data.AnswerList[i].SortOrder) {
              lis.data.push(data.AnswerList[i]);
            }
          }
          answerList.push(lis);
        }
        return answerList;
      } else if (data.QuestionType == 5) {
        return JSON.parse(data.Answer);
      } else {
        return '暂无答案';
      }
    },
    // 子题目参考答案过滤
    steChildAnswer(data) {
      var answer = '';
      if (data.SubQuestionType == 1) {
        return this.Alphabet[Number(data.Answer)];
      } 
      else if (data.SubQuestionType == 2) {
        let answerList = [];
        answerList = data.Answer.split(',').map(Number);
        for (let i = 0; i < answerList.length; i++) {
          if (i == 0) {
            answer = this.Alphabet[Number(answerList[i])];
          } else {
            answer = answer + ',' + this.Alphabet[Number(answerList[i])];
          }
        }
        return answer;
      } else if (data.SubQuestionType == 3) {
        if (Number(data.Answer) == 1) {
          answer = '正确';
        } else if (Number(data.Answer) == 0) {
          answer = '错误';
        }
        return answer;
      }
      return '暂无答案'
    },
    // 获取学生列表
    getPaperStuList() {
      this.loading = true;
      this.$http
        .post('/api/design/Marking/getPaperStuList', {
          examId: this.examid,
          state: this.type,
          query: ''
        })
        .then((res) => {
          this.loading = false;
          this.stuList = res.stuList;
        });
    },
    // 获取试卷
    previewStuPaper() {
      this.loading = true;
      this.$http
        .post('/api/design/marking/previewStuPaper', {
          examId: this.examid,
          stuId: this.stuid
        })
        .then((res) => {
          this.title = res.title;
          this.examScore = res.examScore;
          this.quesList = res.list;
          this.DisplayName = res.stuInfo.DisplayName;
          this.UserNo = res.stuInfo.UserNo;
          this.ClassName = res.stuInfo.ClassName;
          this.SchoolName = res.stuInfo.SchoolName;
          this.setQuestionList(res.list);
          this.batchShoow = true;
          this.loading = false;
        });
    },
    // 干题内容
    fileQuestion(e, index) {
      var title = e.Title.replace(/p>/g, 'span>');
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      var answer = '';
      if (e.QuestionType == 1) {
        if (e.StuAnswer != '' && e.StuAnswer != null) {
          answer = this.Alphabet[Number(e.StuAnswer)];
        }
      } else if (e.QuestionType == 2) {
        let answerList = [];
        if (e.StuAnswer != '' && e.StuAnswer != null && e.StuAnswer != []) {
          answerList = e.StuAnswer.split(',').map(Number);
        }
        for (let i = 0; i < answerList.length; i++) {
          if (i == 0) {
            answer = this.Alphabet[Number(answerList[i])];
          } else {
            answer = answer + ',' + this.Alphabet[Number(answerList[i])];
          }
        }
      } else if (e.QuestionType == 3) {
        if (e.StuAnswer != '' && e.StuAnswer != null) {
          if (Number(e.StuAnswer) == 1) {
            answer = '正确';
          } else if (Number(e.StuAnswer) == 0) {
            answer = '错误';
          }
        }
      }
      title = insertStr(title, 0, '<span>');
      title = insertStr(title, title.length, '</span>');
      var num = index + 1 + '、';
      console.log(num+"："+e.QuestionType);
      var titles = insertStr(title, 6, num);
      if (e.QuestionType == 1 || e.QuestionType == 2 || e.QuestionType == 3) {
        let newNum = title.length + 3;
        let Score = `<span style="margin: 0px 5px;">(&nbsp;` + answer + `&nbsp;)</span>(` + e.Score + `分)`;
        titles = insertStr(titles, newNum, Score);
      } else if (
        e.QuestionType == 4 ||
        e.QuestionType == 5 ||
        e.QuestionType == 6 ||
        e.QuestionType == 7 ||
        e.QuestionType == 8
      ) {
        let newNum = title.length - 5;
        let Score = `(` + e.Score + `分)`;
        titles = insertStr(titles, newNum, Score);
      } else if (e.QuestionType == 12) {
        let newNum = title.length - 5;
        let Score = `(` + e.Score + `分)`;
        titles = insertStr(titles, newNum, Score);
      } else {
        let newNum = title.length - 4;
        let Score = `(` + e.Score + `分)`;
        titles = insertStr(titles, newNum, Score);
      }

      return titles;
    },
    // 单选多选选项
    fileAnswer(e, key) {
      var title = e.Content.replace(/p>/g, 'span>');
      var num = this.Alphabet[key] + '、';
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      var htmlP = title.substring(0, 6);
      if (htmlP != '<span>') {
        title = insertStr(title, 0, '<span>');
        title = insertStr(title, title.length, '</span>');
      }
      return insertStr(title, 6, num);
    },
    // 客观填空题 4
    exerciseNum(e) {
      var num = -1;
      for (let i = 0; i < e.length; i++) {
        if (num < e[i].SortOrder) {
          num = e[i].SortOrder;
        }
      }
      return num + 1;
    },
    // 匹配题题目题干部分
    fileAnswerq(e, key) {
      var title = e.OptionContent.replace(/p>/g, 'span>');
      var num = key + 1 + '、';
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      var htmlP = title.substring(0, 6);
      if (htmlP != '<span>') {
        title = insertStr(title, 0, '<span>');
        title = insertStr(title, title.length, '</span>');
      }
      return insertStr(title, 6, num);
    },
    // 匹配题题目选项部分
    fileAnswers(e, key) {
      var title = e.OptionAnswerContent.replace(/p>/g, 'span>');
      var num = this.Alphabet[key] + '、';
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      var htmlP = title.substring(0, 6);
      if (htmlP != '<span>') {
        title = insertStr(title, 0, '<span>');
        title = insertStr(title, title.length, '</span>');
      }
      return insertStr(title, 6, num);
    },
    // 含有子题目的题干
    fileQuestionChild(e, index) {
      var title = e.Title.replace(/p>/g, 'span>');
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      var answer = '';
      if (e.SubQuestionType == 1) {
        if (e.StuDo.Answer != '' && e.StuDo.Answer != null) {
          answer = this.Alphabet[Number(e.StuDo.Answer)];
        }
      } else if (e.SubQuestionType == 2) {
        let answerList = [];
        if (e.StuDo.Answer != '' && e.StuDo.Answer != null && e.StuDo.Answer != []) {
          answerList = e.StuDo.Answer.split(',').map(Number);
        }
        for (let i = 0; i < answerList.length; i++) {
          if (i == 0) {
            answer = this.Alphabet[Number(answerList[i])];
          } else {
            answer = answer + ',' + this.Alphabet[Number(answerList[i])];
          }
        }
      } else if (e.SubQuestionType == 3) {
        if (e.StuDo.Answer != '' && e.StuDo.Answer != null) {
          if (Number(e.StuDo.Answer) == 1) {
            answer = '正确';
          } else if (Number(e.StuDo.Answer) == 0) {
            answer = '错误';
          }
        }
      }

      title = insertStr(title, 0, '<span>');
      title = insertStr(title, title.length, '</span>');
      var num = index + 1 + '、';
      var titles = insertStr(title, 6, num);
      if (e.SubQuestionType == 1 || e.SubQuestionType == 2 || e.SubQuestionType == 3) {
        let newNum = title.length - 5;
        let Score = `<span style="margin: 0px 5px;">(&nbsp;` + answer + `&nbsp;)</span>(` + e.SubScore + `分)`;
        titles = insertStr(titles, newNum, Score);
      } else {
        let newNum = title.length - 5;
        let Score = `(` + e.SubScore + `分)`;
        titles = insertStr(titles, newNum, Score);
      }

      return titles;
    },
    // 匹配题学生答案
    steMateAnswer(e) {
      let answer = '';
      let answerList = [];
      if (e.StuAnswer != '' && e.StuAnswer != null && e.StuAnswer != []) {
        answerList = e.StuAnswer.split(',').map(Number);
      }
      for (let i = 0; i < answerList.length; i++) {
        if (i == 0) {
          answer = this.Alphabet[Number(answerList[i])];
        } else {
          answer = answer + ',' + this.Alphabet[Number(answerList[i])];
        }
      }
      return answer;
    },
    setQuestionList(queslist) {
      this.loading = true;
      // 判断试卷有哪些题型
      this.listType = [];
      for (let i = 0; i < this.quesList.length; i++) {
        this.listType.push(this.quesList[i].QuestionType);
      }
      // 题型类型去重
      this.listType = [...new Set(this.listType)];
      var listType = this.listType.sort((a, b) => a - b);
      // 构建渲染数据
      var list = [];
      for (let i = 0; i < listType.length; i++) {
        let lis = { type: listType[i], data: [], num: 0, Score: 0 };
        for (let key = 0; key < queslist.length; key++) {
          if (listType[i] == queslist[key].QuestionType) {
            lis.data.push(queslist[key]);
            lis.num++;
            lis.Score = lis.Score + queslist[key].Score;
          }
        }
        list.push(lis);
      }
      let quesData1 = [];
      let quesData2 = [];
      let quesData3 = [];
      let Score1 = 0;
      let Score2 = 0;
      let Score3 = 0;
      for (let i = 0; i < list.length; i++) {
        if (list[i].type == 4) {
          quesData1 = quesData1.concat(list[i].data);
          Score1 = Score1 + list[i].Score;
        } else if (list[i].type == 5) {
          quesData1 = quesData1.concat(list[i].data);
          Score1 = Score1 + list[i].Score;
          list.splice(i, 1);
        }else if (list[i].type == 8) {
          quesData2 = quesData2.concat(list[i].data);
          Score2 = Score2 + list[i].Score;
        } else if (list[i].type == 12) {
          quesData2 = quesData2.concat(list[i].data);
          Score2 = Score2 + list[i].Score;
          list.splice(i, 1);
        }else if (list[i].type == 9) {
          quesData3 = quesData3.concat(list[i].data);
          Score3 = Score3 + list[i].Score;
        } else if (list[i].type == 13) {
          quesData3 = quesData3.concat(list[i].data);
          Score3 = Score3 + list[i].Score;
          list.splice(i, 1);
        }
      };
      if (quesData1.length > 0) {
        let typeShow = true;
        for (let i = 0; i < list.length; i++) {
          if (list[i].type == 4) {
            typeShow = false;
          }
        }
        if (typeShow) {
          let lis = {type: 4, data: []};
          list.push(lis);
        }
      }
      if (quesData2.length > 0) {
        let typeShow = true;
        for (let i = 0; i < list.length; i++) {
          if (list[i].type == 8) {
            typeShow = false;
          }
        }
        if (typeShow) {
          let lis = {type: 8, data: []};
          list.push(lis);
        }
      }
      if (quesData3.length > 0) {
        let typeShow = true;
        for (let i = 0; i < list.length; i++) {
          if (list[i].type == 9) {
            typeShow = false;
          }
        }
        if (typeShow) {
          let lis = {type: 9, data: []};
          list.push(lis);
        }
      }
      for (let i = 0; i < list.length; i++) {
        if (list[i].type == 4) {
          list[i].data = quesData1;
          list[i].Score = Score1;
        }else if (list[i].type == 8) {
          list[i].data = quesData2;
          list[i].Score = Score2;
        }else if (list[i].type == 9) {
          list[i].data = quesData3;
          list[i].Score = Score3;
        }
      }
      var num = -1;
      for (let i = 0; i < list.length; i++) {
        for (let key = 0; key < list[i].data.length; key++) {
          num += 1;
          list[i].data[key].num = num;
        }
      }
      this.list = list;
      this.loading = false;
      setTimeout(() => {
        this.setImgCss();
      }, 500);
    },
    setImgCss() {
      this.loading = true;
      var dom = document.getElementsByTagName('img');
      for (let i = 0; i < dom.length; i++) {
        // dom[i].style.height = 'auto';
        let domWidth = dom[i].width;
        let domHeight = dom[i].height;
        if (dom[i].width > 500) {
          dom[i].width = 500;
          dom[i].height = 500/domWidth*domHeight;
        }
      }
      this.loading = false;
      if (this.batchWord) {
        setTimeout(() => {
          this.getFileSystemUrl();
          
        }, 1000);
      }
    },
    getFileSystemUrl() {
      window.scrollTo(0, 0);
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      this.loading = true;
      this.$http.post('/api/common/accounts/getManagerInfo').then((res) => {
        if (res.code > 0) {
          this.file_system_url = res.file_system_url;
          setTimeout(() => {
            this.exportData();
          }, 1000);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    exportData() {
      var math = document.getElementsByClassName('kfformula');
      var canvas = document.getElementById('canvas');
      var num = math.length;
      if (math.length > 0) {
        for (let i = 0; i < math.length; i++) {
          this.setOssMath(math[i], num);
        }
      } else {
        if (this.lineShow) {
          this.setLine();
        } else {
          this.exportWord();
        }
      }
    },
    setOssMath(dom, num) {
      var canvas = document.createElement('canvas');
      if (dom.clientHeight > 0 && dom.clientWidth > 0) {
        let urlArr = dom.src.split(',');
        let base64 = urlArr[1];
        let imgType = urlArr[0].replace('data:image/', '').replace(';base64', '');
        let file_system_url = this.file_system_url;
        let postUrl = `${file_system_url}&extension=${imgType}&encode=base64`;
        this.$http.post(postUrl, base64).then((data) => {
          let mathImg = document.createElement('img');
          mathImg.src = data.ossOriUrl;
          var node = dom.parentNode;
          node.appendChild(mathImg);
          node.replaceChild(mathImg, dom);
          this.Progress++;
          if (this.Progress == num) {
            if (this.lineShow) {
              this.setLine();
            } else {
              this.exportWord();
            }
            this.loading = false;
          }
        });
      } else {
        this.Progress++;
        if (this.Progress == num) {
          if (this.lineShow) {
            this.setLine();
          } else {
            setTimeout(() => {
              this.exportWord();
            }, 1000);
          }
          this.loading = false;
        }
      }
    },
    setLine() {
      var dom = document.getElementById('quesData_line');
      var canvas = document.createElement('canvas');
      html2Canvas(dom, { useCORS: true })
        .then((canvas) => {
          let imgUrl = canvas.toDataURL('image/png');
          var imgDom = document.createElement('img');
          imgDom.src = imgUrl;
          this.firstFlag = false;
          canvas.getContext('2d').drawImage(imgDom, 0, 0, 320, 240);
          //执行上传
          let completeUrl = canvas.toDataURL('image/png');
          let urlArr = completeUrl.split(',');
          let base64 = urlArr[1];
          let imgType = urlArr[0].replace('data:image/', '').replace(';base64', '');
          let file_system_url = this.file_system_url;
          let postUrl = `${file_system_url}&extension=${imgType}&encode=base64`;
          var node = dom.parentNode;
          this.$http.post(postUrl, base64).then((data) => {
            let quesDom = document.getElementById('quesData_content');
            var lineNum = Math.ceil(quesDom.offsetHeight / 842);
            var frag = document.createElement('div');
            var lisHtml = `<img src="` + data.ossOriUrl + `" />`;
            var imgHtml = ``;
            for (var i = 0; i < lineNum + 1; i++) {
              imgHtml = imgHtml + lisHtml;
            }
            frag.innerHTML = imgHtml;
            node.appendChild(frag);
            node.replaceChild(frag, dom);

            setTimeout(() => {
              this.exportWord();
              this.loading = false;
            }, 1000);
          });
        })
        .catch((error) => {});
    },
    exportWord() {
      var data = { quesData: this.quesList[0].Title, title: this.title };
      var html = baidu.template('quesData_content', data);
      exportWord({
        mhtml: html,
        data: { title: this.title },
        filename: this.DisplayName + '——' + this.title,
        style: 'p{display: inline-block;}img{max-width: calc(100% - 50px);;vertical-align: top;}'
      });
      if (this.batchWord) {
        this.stuNum++;
        if (this.stuNum == this.stuList.length) {
          this.$router.go(0);
        } else {
          this.getBatchWord();
        }
      } else {
        this.$router.go(0);
      }
    }
  }
};
</script>

<style>
</style>